<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.js"></script>
    <script src="js/jquery.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>

<div id="productType" style="width: 600px;height:600px;"></div>

<div id="productTypeBar" style="width: 600px;height:600px;"></div>

<div id="productTypeLine" style="width: 600px;height:600px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);


    /**
     * 从后端获取数据拼接饼状图
     */
    var productType = echarts.init(document.getElementById("productType"));
    productType.clear();
    productType.showLoading({text: '正在努力的读取数据中...'});
    var option1 = {
        title: {
            text: '商品不同类别数量占比图'
        },
        series: {
            type: 'pie',
            data: []
        }
    }
    //获取数据
    $.getJSON('/product/productType', function (data) {
        if (data.status == '200') {
            option1.series.data = data.data.optionData;
            productType.setOption(option1);
            productType.hideLoading();
        } else {
            alert('提示', optionData.msg);
        }
    });

    /**
     * 柱状图
     */
    var productTypeBar = echarts.init(document.getElementById("productTypeBar"));
    productTypeBar.clear();
    productTypeBar.showLoading({text: '正在努力的读取数据中...'});
    var option2 = {
        title: {
            text: '商品类别数量柱状图'
        },
        tooltip: {},
        legend: {
            data:['数量']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: []
        }]
    }

    /**
     * 折线图
     */
    var productTypeLine = echarts.init(document.getElementById("productTypeLine"));
    productTypeLine.clear();
    productTypeLine.showLoading({text: '正在努力的读取数据中...'});
    var option3 = {
        title: {
            text: '商品类别数量折线图'
        },
        tooltip: {},
        legend: {
            data:['数量']
        },
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [],
            type: 'line'
        }]
    }

    /**
     * 从后端获取折线图和柱状图的数据
     */
    $.getJSON('/product/productTypeBar', function (data) {
        if (data.status == '200') {
            option2.series[0].data = data.data.optionData;
            option2.xAxis.data = data.data.xAxis[0].data;
            productTypeBar.setOption(option2);
            productTypeBar.hideLoading();

            option3.series[0].data = data.data.optionData;
            option3.xAxis.data = data.data.xAxis[0].data;
            productTypeLine.setOption(option3);
            productTypeLine.hideLoading();
        } else {
            alert('提示', optionData.msg);
        }
    });


</script>
</body>
</html>